<template>
  <div class="recommend-creator-container">
    <div class="ntf-section-title">{{title}}</div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      class="recomend-title-arrow">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M21 11.999l-7.071-7.071-1.768 1.768 4.055 4.054H2.999v2.5h13.216l-4.054 4.053 1.768 1.768L21 12v-.001z"
        fill="currentColor"
      ></path>
    </svg>
  </div>
</template>
<script>
import { defineComponent,ref } from "vue";
export default defineComponent({
    props:{
        title:{
            type:String,
            required:true,
            default:""
        }
    },
  setup(props, ctx) {
      let title = ref(props.title)
      return {
          title
      }
  },
});
</script>
<style scoped>
.recommend-creator-container {
  font-size: 24sp;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ntf-section-title {
  margin: 12px;
  font-size: 22px;
  color: black;
}
.recomend-title-arrow {
  background: yellow;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 8px;
  margin-right: 12px;
  width: 28px;
  height: 28px;
}
</style>